<template>
  <div>
    <el-alert title="画面提示:带五角星的画面为默认显示的主画面" type="info" show-icon :closable="false"></el-alert>
    <div class="operation">
      <el-button type="primary" @click="dialogFormVisible = true">新建画面</el-button>
      <el-button type="primary" @click="editTopo">编辑画面</el-button>
      <el-button type="primary" @click="setTopo">画面属性</el-button>
    </div>
    <el-alert v-if="showWarning" title="请先点击选中画面" type="warning" @close="closeAlert"></el-alert>
    <el-dialog title="新建画面" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="画面名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="刷新间隔" :label-width="formLabelWidth">
          <el-input v-model="form.refreshInterval" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addProjectTopo">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="画面属性" :visible.sync="dialogSettingTopoVisible">
      <el-form :model="form">
        <el-form-item label="画面名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="刷新间隔" :label-width="formLabelWidth">
          <el-input v-model="form.refreshInterval" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="设为默认" :label-width="formLabelWidth">
          <el-checkbox v-model="form.defaultValue" @change="defaultValueChanged"></el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSettingTopoVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateProjectTopo">确 定</el-button>
      </div>
    </el-dialog>
    <div class="topo-list">
      <div v-if="!allTopo.length">
        <p>当前没有创建画面！请新建画面！</p>
      </div>
      <div v-else :class="['topo-item',selectedTopoId==item.id ? 'selected': '']" v-for="item in allTopo" @click="selectedTopoId = item.id">
        <div v-if="item.defaultValue" class="ribbon ribbon-vertical-left ribbon-color-success uppercase">
          <i class="fa fa-star"></i>
        </div>
        <div class="font-red hide" name="close" style="position:absolute;top:2px;right:5px;cursor:pointer;" @click="closeTopo(item.id)">
          <i class="fa fa-close"></i>
        </div>
        <img src="./../../../static/images/topoIcon.png">
        <div style="clear:both"></div>
        <span>{{item.name}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
// watch里面拿不到data里的allTopo
// var topos

export default {
  name: 'topo',
  props: ['projectId'],
  data () {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogSettingTopoVisible: false,
      form: {
        name: '',
        refreshInterval: '',
        defaultValue: false
      },
      formLabelWidth: '120px',
      allTopo: [],
      selectedTopoId: null,
      showWarning: false
    }
  },
  mounted () {
    this.requestTopo()
  },
  methods: {
    requestTopo () {
      this.$http.get('/project/configuration/find?project_id=' + this.projectId).then((res) => {
        this.allTopo = res.data
      })
    },
    addProjectTopo () {
      this.$http.post('/project/configuration/create', _.extend(this.form, { projectId: this.projectId, id: this.selectedTopoId })).then((res) => {
        this.requestTopo()
      })
      this.dialogFormVisible = false
    },
    updateProjectTopo () {
      this.dialogSettingTopoVisible = false
      this.addProjectTopo()
    },
    defaultValueChanged () {
      if (!this.form.defaultValue) {
        var filter = _.filter(this.allTopo, (topo) => { return topo.defaultValue })
        if (filter && filter.length === 1 && filter[0].id === this.selectedTopoId) {
          this.$message({
            message: '项目必须要有一个默认的画面，如要切换请选择其它画面设为默认',
            type: 'warning'
          })
          this.form.defaultValue = true
        }
      }
    },
    editTopo () {
      if (!this.selectedTopoId) {
        this.showWarning = true
        return
      } else {
        this.showWarning = false
      }
      this.goMxgraph()
    },
    setTopo () {
      if (!this.selectedTopoId) {
        this.showWarning = true
        return
      } else {
        this.showWarning = false
      }
      this.dialogSettingTopoVisible = true
      this.requestTopo()
      this.form = _.filter(this.allTopo, (item) => {
        return item.id === this.selectedTopoId
      })[0]
    },
    closeTopo (id) {
      this.$http.get('/project/configuration/delete?id=' + id).then((res) => {
        this.requestTopo()
      })
    },
    closeAlert () {
      this.showWarning = false
    },
    goMxgraph () {
      window.open('/static/mxgraph/javascript/examples/grapheditor/www/index.html?topoid=' + this.selectedTopoId + '&projectId=' + this.projectId, '_blank')
    }
  }
}
</script>
<style lang="stylus" scoped>
.operation {
  text-align: right;
  margin: 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #eef1f5;
}
.topo-list {
  margin-bottom: 30px;
}
.topo-item {
  text-align: center;
  width: 170px;
  height: 126px;
  padding: 25px;
  display: inline-block;
  margin: 0 15px;
  background-color: #e9edef;
  cursor: pointer;
  position: relative;

  img {
    vertical-align: middle;
  }
  .ribbon.ribbon-color-success {
    background-color: #36c6d3;
    color: #fff;
  }
  .ribbon.ribbon-vertical-left {
    top: -2px;
    left: 15px;
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .ribbon {
    position: absolute;
    top: 15px;
    left: -2px;
    padding: .5em 1em;
    z-index: 5;
  }
}
.topo-item:hover {
  .hide {
    display: block;
  }
}
.font-red {
  color: #e7505a!important;
}
.hide {
  display: none;
}
.topo-item.selected {
  background-color: #B4C8EF;
}
.el-alert {
  padding: 20px 16px;
  margin-bottom: 20px;
}
</style>
